<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../common/jspcommon.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@include file="../common/meta.jsp" %>
<title><c:out value="${pictorial.title}"/> - 画报 - 果果街</title>
<%@include file="../common/css.jsp" %>
<%@include file="../common/js.jsp" %>
<link href="css/v3/huabao/huabao.css" type="text/css" rel="stylesheet" />

</head>
<body>
<%@include file="../common/header.jsp" %>


<div class="w100p">
	<!--adOne-->
	<c:if test="${fn:length(topAdv) > 0}">
		<div class="w980 mg mb15 clearfix">
			<c:forEach items="${topAdv}" var="top">
        		<a target="_blank" href="${top.hyperlink}" class="fl block"><img height="61" src="${top.picture}" class="block r5" alt="${top.title}" /></a>
        	</c:forEach>
	    </div>
	</c:if>
	<!--adOne--end-->
	
    <!-- huabao_v3titleinfo_v3 -->
    <div class="w980 mg mb10">
    	<div class="ml15 hbshow_v3">
        	<div class="mb20 whoshb"><a href="hotPictorial.htm" target="_blank">画报</a><i class="ml5 mr5">/</i><a target="_blank" href="picg.htm?cg=${pictorial.type}">${pictorial.typeName}</a><i class="ml5 mr5">/</i><a target="_blank" href="cover.htm?fid=${familyObj.doorplate}"><c:out value="${pictorial.memberObj.nickname}" /></a><i>的画报</i></div>
        	<div class="w980 clearfix">
        		<div class="leftpart">
		            <h1 class="title_v3 f16 fb ff6699"><c:out value="${pictorial.title}" /></h1>
		             <c:if test="${fn:length(picTopicList) > 0}">
		             	<div class="mt5 mb5 lh120"><span>已加入的主题：</span>
			             	<c:forEach items="${picTopicList}" var="picTopic">
			             		<a target="_blank" href="picTopicDetail.htm?tid=${picTopic.identifier}" class="ff6699"><c:out value="${picTopic.name}" /></a>
			             	</c:forEach>
		             	</div>
                    </c:if>
		            <div class="fc9"><span>图片</span><i>(</i>${pictorial.picAmount+pictorial.proAmount}<i>)</i><span class="ml10">围观</span><i>(</i>${pictorial.viewAmount}<i>)</i></div>
		            <p class="mt15 mb10">${pictorial.description}</p>
	            </div>
	            <div class="rightpart clearfix">
	            	<div class="fr clearfix">
	            		<a href="createPictorial.htm?pictorial=${pictorial.identifier}" class="fc9 fl">编辑</a>
	            		<i class="ml5 mr5 fl">|</i>
	            		<a href="javascript:;" id="del_pictorial" class="fc9 fl">删除</a>
	            		<div class="pr fl">
	            			<a id="pic_show_button" href="javascript:;" class="block"><span class="greentriangle fl"></span><c:if test="${show==1}">大图展示</c:if><c:if test="${show==2}">小图展示</c:if></a>
	            			<ul class="bsshow_v3" style="display: none;" id="pic_show_sel">
	            				<li>
	            					<a href="picdt.htm?id=${pictorial.identifier}">大图展示</a>
	            				</li>
	            				<li>
	            					<a href="picdt.htm?id=${pictorial.identifier}&show=2">小图展示</a>
	            				</li>
	            			</ul>
	            		</div>
	            	</div>
	            	<a href="javascript:;" id="add_pictorial_b" picId="${pictorial.identifier}" class="fr mt30"><img src="images/v3/smallpic/insertbtn.png" alt="添加内容"/></a>
	            </div>
            </div>
        </div>
    </div>
    <!-- huabao_v3titleinfo_v3--end -->
    
    <!-- separate_v3-->
    <div class="w980 mg mb5 mt5">
    	<div class="dashseparate_v3"></div>
    </div>
    <!-- separate_v3--end-->
    
    <!-- huabao_v3picshow_v3-->
    <div class="w980 mg mb10 clearfix">
    <c:choose>
   		<c:when test="${pageModel.totalRecord > 0}">
   			<c:if test="${show == 1}">
		    	<div class="fl hbpic_v3">
		        	<div class="boxhead_v3 mg pr h5">
		                <span class="lt"></span>
		                <span class="rt"></span>	
		        	</div>
		            <div class="wrap_v3">
		            	
		            		
			            			<c:forEach items="${pageModel.list}" var="doing">
					            		<div class="ml15 mt10 mr5 mb30 clearfix" id="doing_li_${doing.identifier}">
						                	<div class="fl picshow_v3 mr20">
						                		<c:forEach items="${doing.doingPictureList}" var="picture">
							                    	<div class="pr mb5 tc">
							                            <a target="_blank"  href="dt.htm?pic=${picture.identifier}"><img src="${picture.imageServer}${picture.pictureThumbnail}_320xXXX.jpg" class="r5" /></a>
							                            <a href="javascript:;" picType="1" picproId="${picture.identifier}" class="add_to_album_btn"></a>
							                        </div>
						                        </c:forEach>
						                        <c:forEach items="${doing.doingProductList}" var="product">
						                        	<div class="pr mb5 tc">
							                            <a target="_blank"  href="dt.htm?pro=${product.identifier}" class="block"><img src="${product.imageServer}${product.picThumb}_320xXXX.jpg" class="r5" /></a>
							                            <span class="hoverprice_v3"><i>￥${product.price}</i><b></b></span>
							                            <a href="javascript:;"  picType="2" picproId="${product.identifier}" class="add_to_album_btn"></a>
							                        </div> 
					                    		</c:forEach>
						                               
						                    </div>
						                    <div class="fl info_v3">
						                    	<div class="clearfix">
						                    		<a href="javascript:;" class="fr mt10 fc9 mr10 delDoing" doingId="${doing.identifier}">删除</a><span class="date_v3 block"><fmt:formatDate value="${doing.gmtCreated}" pattern="MM/dd" /></span>
						                    	</div>
						                    	
						                    	<div class="clearfix mt10 mb10">
						                        	<span class="pinkheart_v3 fl mr5 block"></span>
						                        	<span class="fl mr10"><a href="javascript:;" onclick="picLoveDoing('${doing.identifier}','${familyObj.doorplate}',this)" class="fc9">喜欢</a><i class="fc9">(</i><a href="javascript:;" class="fc9 unl love">${doing.doingLoveCount}</a><i class="fc9">)</i></span>
						                       		<span class="fl"><a target="_blank" href="dt.htm?id=${doing.identifier}" class="fc9">评论</a><i class="fc9">(</i><a target="_blank" href="dt.htm?id=${doing.identifier}" class="fc9 unl">${doing.commentCount}</a><i class="fc9">)</i></span>
						                        </div>
						                    <p class="mt15">${doing.replaceContent}</p>
						                    </div>
						                    <div class="clear"></div>
						                    <div class="separate_v3 mt30"></div>    
						                </div>
						                
					            	</c:forEach>
			            		
			            	
			            
		            	
		            </div>
		            <div class="clear"></div>
		            
		            <div class="boxfoot_v3 mg pr h5">
		                <span class="lb"></span>
		                <span class="rb"></span>	
		        	</div>
		        </div>
		        </c:if>
		        <c:if test="${show==2}">
		        
		        	<div class="fl hbpic_v3 hbsmallwrap_v3">
		        	
			            <div class="wrap_v3 clearfix" id="pic_small_div">
			            	<c:forEach items="${pageModel.list}" var="doing">
			            	<!-- 小图展示 -->
					        	<div class="mr10 mb10 cpwrap_v3 w220 fl">
					            	<div class="boxhead_v3 w210 mg pr h5">
					                    <span class="lt"></span>
					                    <span class="rt"></span>	
					        		</div>
					                <div class="cpbody_v3">
					                    <div class="cppic_v3">
					                        <div class="mt5 mb5">
					                            <ul class="ml10">
					                            	<c:forEach items="${doing.doingPictureList}" var="picture">
														<li class="mb2 clearfix pr">
															<a href="javascript:;" picType="1" picproId="${picture.identifier}" class="add_to_album_btn"></a>
															<a href="dt.htm?pic=${picture.identifier }" target="_blank"> <img height="${picture.height200xxx}"
																src="${picture.imageServer }${picture.pictureThumbnail}_200xXXX.jpg" />
															</a>
														</li>
													</c:forEach>
													<c:forEach items="${doing.doingProductList}" var="product">
														<li class="mb2 clearfix pr">
															<a href="javascript:;" picType="2" picproId="${product.identifier}" class="add_to_album_btn"></a>
															<a class="pr block fl"
																href="dt.htm?pro=${product.identifier }"
																target="_blank"> <img height="${product.height200xxx}"
																src="${product.imageServer }${product.picThumb }_200xXXX.jpg" />
																<span class="block fl pa hoverprice_v3"><i class="block fl">￥${product.price}</i><b class="block fl"></b></span>
															</a>
														</li>
													</c:forEach>
					                               
					                            </ul>
					                            
					                            <p class="mt10 mb10 f14 lh120 ml10 mr10">${doing.meContent}</p>
					                        </div>
					                    </div>
					                    <div class="cpinfo_v3">
					                    	<div class="mt10 mr5 ml10 mb10">
					                        	<div class="mb10 clearfix">
					                                <a nickname="${doing.memberName}" href="cover.htm?fid=${doing.owner}" target="_blank" class="pic_v3 block fl mr5"><img src="${doing.memberImageServer }${doing.memberAvatar}" width="24" class="block" alt="${doing.memberName}"/></a>
					                                <div class="fl">
					                                    <a nickname="${doing.memberName}" href="cover.htm?fid=${doing.owner}" target="_blank" class="ff6699">${doing.memberName}</a>
					                                    <div class="clearfix mt5 mr40">
					                                		<span class="fr"><a href="dt.htm?id=${doing.identifier}" class="fc9">评论</a><i class="fc9">(</i><a href="#" class="fc9 unl">${doing.commentCount}</a><i class="fc9">)</i></span>
					                                		<span class="fr mr10"><a href="javascript:void(0);" onclick="picLoveDoing('${doing.identifier}','${doing.owner}',this);" class="fc9">喜欢</a><i class="fc9">(</i><a href="javascript:void(0);" class="fc9 unl love">${doing.doingLoveCount}</a><i class="fc9">)</i></span>
					                                		<span class="pinkheart_v3 fr mr5 block"></span>
					                            		</div>
					                                </div>
					                            </div>
					                        </div>
					                    </div>
					                </div>
					                <div class="boxfoot_v3 w210 mg pr h5">
					        			<span class="lb"></span>
					            		<span class="rb"></span>	
					       			 </div>
					            </div>
				            </c:forEach>
			        	<!-- 小图展示 -->
			        	
			        	
			        	<!-- 小图展示 -->
			        	
			            </div>
			
			        	
			        	
			        </div>
		        
		        </c:if>
   		</c:when>
   		<c:otherwise>
   			<div class="fl hbpic_v3">
	        	<div class="boxhead_v3 mg pr h5">
	                <span class="lt"></span>
	                <span class="rt"></span>	
	        	</div>
	            <div class="wrap_v3 clearfix">
	            	
	                <div class="ml15 mt10 mr5 mb30 clearfix">
	                	<img src="images/v3/otherpic/jc01.png" class="block" />
	                </div>
	            	
	            </div>
	            <div class="boxfoot_v3 mg pr h5">
	                <span class="lb"></span>
	                <span class="rb"></span>	
	        	</div>
	        </div>
   		</c:otherwise>
   	</c:choose>
    
        
        
        <div class="fl others_v3">
        	<div class="boxhead_v3 mg pr h5">
                <span class="lt"></span>
                <span class="rt"></span>	
        	</div>
            <div class="wrap_v3">
           		<div class="ml13 mt10 mr10">
                	<div class="userinfo_v3">
                    	<div class="mb10 clearfix">
                            <a target="_blank" href="cover.htm?fid=${familyObj.doorplate}" class="block fl mr5"><img nickname="${pictorial.memberObj.nickname}" alt="${pictorial.memberObj.nickname}" src="${pictorial.memberObj.imageServer}${pictorial.memberObj.avatar}" width="50" class="block" /></a>
                            <div class="fl" id="ta_pic_detail_gz">
                                <a target="_blank" href="cover.htm?fid=${familyObj.doorplate}" class="ff6699 lh150">${pictorial.memberObj.nickname}</a>
                            </div>
                        </div>
                        <div class="mb10">
                        	<span class="fc9">画报</span><i class="ml5 mr5 ff6699">${pictorialCount}</i><span class="fc9">分享</span><i class="ml5 mr5 ff6699">${shareCount}</i><span class="fc9">被喜欢</span><i class="ml5 mr5 ff6699">${loveCount}</i>
                        </div>
                        <div class="mb10">
                        	<span class="fb  fc9">所在地：</span><i class="ml5 mr5 fc6">${familyObj.province}</i><i class=fc6>${familyObj.city}</i>
                        </div>
                        
                        <!-- comment_v3-->
                        <div class="mb10 comment_v3 graysepa_v3">
                        	<h3 class="fb ff6699">给画报评论</h3>
                            <textarea id="pictorial_comment"></textarea>
                            <input type="hidden" id="reply_comment_id" value=""/>
                            <a id="submit_pic_comment" doingId="${picDoing.identifier}" family="${picDoing.owner}" href="javascript:;" class="subbtn_v3 mt5">确定</a>
                            <div class="mt10 clearfix">
                            	 <ul class="clearfix"  id="pic_comment_list">
                            	 	 <c:forEach items="${commentList}" var="comment">
			                        	<li class=" clearfix mb5">
	                                    	<a href="javascript:replyReply('${comment.identifier}','${comment.commentUserName}');" class="fr ff6699 lh180">回复</a>
	                                    	<a target="_blank" href="cover.htm?nid=${comment.commentUserName}" class="block fl mr5"><img nickname="${comment.commentUserName}" src="${comment.memberImageServer}${comment.memberAvatar}" width="20" class="block" /></a>
	                                        <a target="_blank" href="cover.htm?nid=${comment.commentUserName}" nickname="${comment.commentUserName}" class="fl ff6699 lh180"><c:out value="${comment.commentUserName}" />:</a>
	                                        <span class="fl lh180 fc6">${comment.realContent}</span>
	                                    </li>
			                        </c:forEach>
                            	 </ul>
                            	<a target="_blank" href="dt.htm?id=${picDoing.identifier}" class="fr ff6699 fb mb5">更多</a>
                            </div>
                        </div>
                        <!-- comment_v3--end-->
                        
                        <!-- picshow_v3-->
                        <c:if test="${fn:length(picList2.list) > 0}">
                        	 <div class="mt15 graysepa_v3">
	                        	<h3 class="f14 ff6699 fb">我家的更多画报</h3>
	                        	<c:forEach items="${picList2.list}" var="pictorial"  varStatus="status">
	                        		 <div class="moreelse_v3 mt10">
		                            	<div class="huabao_v3">
		                                	<div class="boxhead_v3 mg pr h5">
		                						<span class="lt"></span>
		                						<span class="rt"></span>	
		        							</div>
		                                    <div class="wrap_v3">
		                                    	<div class="mt5 ml10 mr5">
		                                        	<ul class="pic_v3 clearfix">
		                                        		<c:forEach items="${pictorial.picList6}" var="picUrl">
							                    			<li class="fl"><a class="block" target="_blank" href="picdt.htm?id=${pictorial.identifier}"><img class="block" src="${picUrl}_100x100.jpg" width="61" alt="${pictorial.title}" /></a></li>
							                    		</c:forEach>
		                                            </ul>
		                                            <p class="mt5 lh120 fb info_v3"><c:out value="${pictorial.title}" /></p>
		                                        </div>
		                                    </div>
		                                    <div class="boxfoot_v3 mg pr h5">
		                						<span class="lb"></span>
		                						<span class="rb"></span>	
		        							</div>
		                                </div>
		                                <div class="mb10 ml10 mt10">
		                        			<span class="f42481">商品</span><i class="ml5 mr5">${pictorial.proAmount}</i><span class="f42481">图片</span><i class="ml5 mr5">${pictorial.picAmount}</i><span class="f42481">围观</span><i class="ml5 mr5">${pictorial.viewAmount}</i>
		                        		</div>
		                            </div>
	                        	</c:forEach>
	                        </div>
                        </c:if>
                       
                        <!-- picshow_v3--end-->
                        
                        <!-- otherlove_v3 -->
                        <c:if test="${fn:length(lovePicList) > 0 }">
                        	<div class="mt10 mb15">
	                        	<h3 class="f14 ff6699 fb"><a href="javascript:;" class="ff6699">TA们也喜欢这个画报</a></h3>
	                        	<ul class="clearfix otherlove_v3 mt10">
	                        		<c:forEach items="${lovePicList}" var="picVisit">
			                    		<li class="fl"><a target="_blank" href="pictorial.htm?family=${picVisit.family}" title="${picVisit.memberName}"><img src="${picVisit.memberImageServer}${picVisit.memberAvatar}" width="61" alt="${picVisit.memberName}"/></a></li>
			                    	</c:forEach>
	                             </ul>
	                        </div>
                        </c:if>
                        
                        <!-- otherlove_v3--end-->
                        	
                        
                    </div>
                </div>
            </div>
            <div class="boxfoot_v3 mg pr h5">
                <span class="lb"></span>
                <span class="rb"></span>	
        	</div>
        </div>
        <div id="pager" class="h_page"></div>    
    </div>
    <!-- huabao_v3picshow_v3--end-->
   
</div>
<!-- content--end-->
<%@include file="../common/footer.jsp" %>
<script type="text/javascript" src="js/web2/joinPictorial.js"></script>
<script type="text/javascript">
	$(function(){
		
		
		//分页
		$("#pager").pager({ pagenumber: ${pageModel.currentPage}, 
								pagecount: ${pageModel.totalPage},
								buttonClickCallback: function(page){
									window.location.href = "picdt.htm?show=${show}&id=${pictorial.identifier}&page="+page;
								}
		});
		//删除画报按钮
		$("#del_pictorial").click(function(){
			if(confirm("你确定要删除该画报吗？")){
				$.post("deletePictorial.htm",{
							pictorial:'${pictorial.identifier}'
						},function(data){
							if(data=='success'){
								window.location.href="pictorial.htm?family=${familyObj.doorplate}";
							}
							
						});
				}
		});
		//评论该画报
		$("#submit_pic_comment").click(function(){
			if(GUOGUO.checkLogin()){
				var commentText = $("#pictorial_comment").val();
				if(IsNull(commentText)){
					alert("请输入评论内容");
					return ;
				}
				if(commentText.length > 140){
					alert("评论内容超过140个字了");
					return ;
				}
				
				var doingId = $(this).attr("doingId");
				var toFamily = $(this).attr("family");
				var reply_comment_id = $("#reply_comment_id").val();
				$.post("addDoingComment.htm",
				{
					'commentId':doingId,
					'content':commentText,
					'commentIdType':"doingid",
					'toFamily':toFamily,
					'isForward':false,
					'replyCommentId':reply_comment_id
				},
				function(data){
					if(data == 'success'){
						$("#pic_comment_list").load("picCommentList.htm?pictorial=${pictorial.identifier}");
						$("#pictorial_comment").val("");
						$("#reply_comment_id").val("");
					}
				});
				
			}else{
				GUOGUO.memberLogin();
			}
			
		});
		
		
		
		//删除画报内的微博
		$(".delDoing").click(function(){
			var doingId = $(this).attr("doingId");
			if(confirm("确定删除这条广播？")){
				$.post("deleteDoing.htm",{doingId:doingId},function(data){
					if(data=='success'){
						$("#doing_li_"+doingId).remove();
					}
				});
			}
		});
		
		//图片展示方式
		$("#pic_show_button").hover(function(){
			$("#pic_show_sel").show();
		},function(){
			$("#pic_show_sel").hide();
		});
		$("#pic_show_sel").hover(function(){
			$("#pic_show_sel").show();
		},function(){
			$("#pic_show_sel").hide();
		});
		
		$("#pic_show_arrows").hover(function(){
			$("#pic_show_sel").show();
		},function(){
			$("#pic_show_sel").hide();
		});
		
		//图片加载完之后给div赋值样式
		  $('#pic_small_div').masonry({
		    itemSelector : '.cpwrap_v3'
		  });
		// 添加内容按钮
		$("#add_pictorial_b").click(function(){
			var picId = $(this).attr("picId");
			GUOGUO.weiboDialog(picId);
		});
		//评论长度限制
		$("#pic_comment_list li").each(function(index){
			var iCall=$(this).find("a").eq(0).width();
			var iPic=$(this).find("a").eq(1).width();
			var iName=$(this).find("a").eq(2).width();
			var iCommentWid=$(this).width()-iCall-iPic-iName-5;
			$(this).find("span").css({"width":iCommentWid+"px","height":"21px","overflow":"hidden"});
		});
	});
	
	
	function replyReply(commentId,nickname){
		$("#pictorial_comment").val("回复@"+nickname+"：");
		$("#reply_comment_id").val(commentId);
		$("#pictorial_comment").focus();
	}
	
	picLoveDoing = function(doingId,f,a_love){
		if(GUOGUO.checkLogin()){
			var $loveCount=$(a_love).siblings('a');
			
			var loveCount=parseInt($loveCount.text());
			$.get("loveDoing.htm?doingId="+doingId+"&loveFamily="+f,function(data){
				if(data=="alreadyLove"){
					alert("你已经喜欢过了");
				}
				if(data=="loveSuccess"){
					$loveCount.text(loveCount+1)
				}
				if(data=="sameFamily"){
					alert("这是你自己啊");
				}
			}); 
		}else{
			GUOGUO.memberLogin();
		}
	}
	
</script>
</body>
</html>
